<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from "echarts";
import resize from "../../../assets/js/charts/resize";
export default {
  mixins: [resize],
  props: {
    barChartData: {},
    className: {
      type: String,
      default: "chart"
    },
    id: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "200px"
    },
    height: {
      type: String,
      default: "200px"
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      // 图表展示美化：人数的值小于5的时候，y轴坐标会显示1.5这样的值。这里设置人数最大小于5的时候，则设置y轴最大值为5；
      let maxVal =
        Math.max.apply(null, this.barChartData.appVisitCount) < 5 ? 5 : null; //y坐标最大值
      this.chart.setOption({
        title: {
          text: this.barChartData.timeTitle,
          textStyle: {
            fontWeight: "normal",
            fontSize: 14,
            color: "#73D3FF"
          },
          x: "center",
          top: "5%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#08DBFF"
            }
          },
          formatter: "{b} <br/> 访问量:{c}人"
        },
        grid: {
          //设置图到左侧、右侧、底部的距离
          left: 80,
          right: 50,
          bottom: 100
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            rotate: 45,
            color: "#fff",
            fontSize: "14"
          },
          axisLine: {
            lineStyle: {
              color: "#213967"
            }
          },
          data: this.barChartData.appTitleData
        },
        yAxis: {
          type: "value",
          max: maxVal,
          min: 0,
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: "14",
            color: "#fff"
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#213967"
            }
          }
        },
        // 数据区域缩放设置：
        dataZoom: [
          {
            show: true,
            height: 10,
            xAxisIndex: [0],
            bottom: 18,
            start: 0,
            end: 50,//全部则100,此处是百分比值
            handleIcon:
              "M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z",
           //拖动条的手柄（2个，分别位于图中蓝色拖动条最左侧和最右侧），handleSize大于0 的时候才显示，才能用鼠标剪头hover上去进行拖动
           handleSize: 6,//手柄大小
            handleStyle:{//手柄样式
              borderWidth:1,
              borderColor:"#3a73eb",
              borderType:"solid",
            },
            handleColor: "#3a73eb", //h滑动图标的颜色
            showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
            showDataShadow: false, //是否显示数据阴影 默认auto
            fillerColor: "#3a73eb", //选中范围的填充颜色
            backgroundColor: "#00172b", //区域的背景颜色
            borderColor: "#00172b", //区域的边框颜色
          },
          {
            type: "inside",
            start: 1,
            end: 50
          }
        ],
        animationEasing: "elasticOut",
        series: [
          {
            data: this.barChartData.appVisitCount,
            type: "bar",
            itemStyle: {
              borderColor: "#3A73EB",
              color: "#3A73EB",
              borderWidth: 0
            },
            barWidth: 24,
            lineStyle: {
              color: "#3A73EB"
            }
          }
        ]
      });
    }
  }
};
</script>
